<script setup>
import { usePermissionStore } from '@/store/index.js'
import { useRoute } from 'vue-router'

const permissionStore = usePermissionStore()
const currentSideMenus = permissionStore.getCurrentSideMenus(
  useRoute().meta.rootName,
)

const defaultOpeneds = currentSideMenus
  .filter(item => item.children?.length && item.path)
  .map(i => i.path)
</script>

<template>
  <el-menu
    :router="true"
    class="us"
    mode="vertical"
    :default-openeds="defaultOpeneds"
    :default-active="permissionStore.activeSideMenu"
  >
    <template v-for="item in currentSideMenus" :key="item.path">
      <MenuTree :item="item" />
    </template>
  </el-menu>
</template>

<style scoped>
.el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9);
}
.el-menu-item {
  border-radius: 8px;
}
/**
 右边的边框不要
 **/
.el-menu {
  border-right: none;
}
:deep(.el-menu-item:hover) {
  color: var(--el-color-primary);
}
</style>
